<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            background-color: aqua;
            min-width: 100px;
            height: 50px;
        }
        
        #div1 {
            width: 400px;
            height: 200px;
            background-color: red;
            margin-left: 200px;
            position: relative;
        }
        
        #div2 {
            width: 300px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            left: 0;
        }
    </style>
    <!-- <script src="./src/indexDB.js"></script> -->
    <script src="../../dist/index.js"></script>
</head>

<body>
    this is index.html

    <button id="add">add</button>
    <button id="delete">delete</button>
    <button id="deleteDataBase">deleteDataBase</button>
    <button id="deleteObjectStore">deleteObjectStore</button>
    <button id="update">update</button>
    <button id="get">get</button>
    <button id="getAll">getAll</button>
    <button id="findByIndex">findByIndex</button>

    <script>
        let scheme1 = [{
            storeName: 'person13', //表名
            data: [{ //要存的数据
                id: 1,
                name: 'wcx1',
                age: 29,
                email: 'wcx@qq.com'
            }]
        }, {
            storeName: 'person14', //表名
            data: [{ //要存的数据
                id: 2,
                name: 'wcx2',
                age: 29,
                email: 'wcx@qq.com'
            }]
        }]

        let scheme2 = [{
            storeName: 'person3', //表名
            _id: 1, //外键
            data: [{ //要存的数据
                id: 1,
                name: 'wcx1',
                age: 29,
                email: 'wcx@qq.com'
            }]
        }, {
            storeName: 'person4', //表名
            _id: 2, //外键
            data: [{ //要存的数据
                id: 2,
                name: 'wcx2',
                age: 29,
                email: 'wcx@qq.com'
            }]
        }]

        let idArr = [{
            storeName: scheme1[0].storeName,
            id: scheme1[0].data[0].id
        }, {
            storeName: scheme1[1].storeName,
            id: scheme1[1].data[0].id
        }];

        let storeNames = [scheme1[0].storeName, scheme1[1].storeName]

        document.querySelector("#add").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1);
            await indexDB.add(scheme1).then(v => {
                console.log('add', v)
            }).catch(e => {
                console.log('err', e)
            })
        })
        document.querySelector("#get").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1);
            await indexDB.read(idArr).then(v => {
                console.log('get', v)
            });
        })

        document.querySelector("#getAll").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1);
            await indexDB.readAll(storeNames).then(v => {
                console.log('所有的数据', v)
            });

        })

        document.querySelector("#update").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1);
            await indexDB.update(scheme1[0].storeName, {
                id: 1,
                name: 'wc',
                age: 29,
                email: 'wcx@qq.com'
            }).then(v => {
                console.log('update', v)
            })
        })

        document.querySelector("#delete").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1);
            await indexDB.delete(scheme1[0].storeName, 1)
        })
        document.querySelector("#deleteDataBase").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.deleteDataBase('myFirstIndexDB').then(v => {
                console.log('删除数据库成功', v)
            }).catch(e => {
                console.log('删除数据库失败', e)
            })
        })
        document.querySelector("#deleteObjectStore").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1).then(v => {
                console.log('数据库打开成功')
            }).catch(e => {
                console.log('数据库打开失败', e)
            });
            await indexDB.deleteObjectStore(scheme1[0].storeName).then(v => {
                console.log('删除仓库成功', v)
            }).catch(e => {
                console.log('删除仓库失败', e)
            })
        })

        document.querySelector("#findByIndex").addEventListener('click', async function() {
            let indexDB = new myFirstIndexDB();
            await indexDB.open(scheme1).then(v => {
                console.log('数据库打开成功')
            }).catch(e => {
                console.log('数据库打开失败', e)
            });

            await indexDB.findByIndex(scheme1[0].storeName, 'name', 'wc').then(v => {
                console.log('查询成功', v)
            })
        })
    </script>
</body>

</html>